<template>
	<div>
		<p>
			<span class="title">{{content.title}}</span><br />
			<span class="author">作者{{content.author.loginname}}&nbsp;&nbsp;浏览次数{{content.visit_count}}</span>
			<span @click="collect" v-if="!is_collected" style="color:darkred">&nbsp;&nbsp;收藏</span>
			<span @click="collect" v-if="is_collected">&nbsp;&nbsp;已收藏</span>
			<br /><br />
			{{content.id}}	{{content.content}}	
		</p>
		<mt-cell :title="'回答'+content.reply_count" value="收藏" icon="icon-test4"  style="color:red"></mt-cell>
		
		<mt-field placeholder="我要回答" type="textarea" rows="2" v-model="introduction" style="width:100%;"></mt-field>
	<mt-button type="primary" style="width: 100%;" @click="submit">提交</mt-button>
	<ul>
		<li v-for="answer in answers">{{answer}}</li>
	</ul>
		<div class="footer"></div>
	</div>

</template>
<script>
import _ from 'lodash'
export default {
  components: {
  },
  data () {
    return {
    msgid:'',
    content:{},
    introduction:'',
    answers:[],
    loginname:"",
    is_collected:false
    }

  },
  mounted () {
    this.msgid=this.$route.query.id

  },
created: function () {
	let id=this.$route.query.id;
    this.$axios.get('https://cnodejs.org/api/v1/topic/'+id)
    .then((res) => {
     console.log(res.data)
     this.content=res.data.data
    }, (err) => {
      console.log(err)
    })
  },
methods:{
	submit(){
		 this.answers.push(this.introduction);                      
	},
	collect(){
		console.log(this.msgid);
		this.is_collected="true";
		this.$axios.post('https://cnodejs.org/api/v1/topic_collect/collect',{
        accesstoken:this.content.author_id,
        topic_id :this.content.id
		})
    .then((res) => {
     console.log(res.data)
   //  this.content=res.data.data
    }, (err) => {
      console.log(err)
    })
	}
}
}
</script>

<style scoped>
	p{
		width: 100%;
		background: #fff;
		padding: 10px;
		margin: 0 auto;
		margin-top: 10px;
		
	}
	.title{
		color:darkblue;
		font-size: 16px;
		font-weight: bold;
	}
	.author{
		color:red
	}
	    .footer{
		height: 50px;
	}
</style>